<template>
  <el-container>
    <el-aside :width="width">
      <el-menu
        router
        collapse-transition
        active-text-color="#ffd04b"
        :default-active="this.$route.path"
        :collapse="isCollapse">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-data-line"></i><span>系统管理</span>
          </template>
          <el-menu-item index="/list"><i class="el-icon-s-order"></i>流程列表</el-menu-item>
          <el-menu-item index="/list2"><i class="el-icon-location"></i>角色管理</el-menu-item>
          <el-menu-item index="/list3"><i class="el-icon-location"></i>菜单管理</el-menu-item>
          <el-menu-item index="/list3"><i class="el-icon-location"></i>部门管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-setting"></i><span>系统监控</span>
          </template>
          <el-menu-item index="/list1"><i class="el-icon-location"></i>在线用户</el-menu-item>
          <el-menu-item index="/list2"><i class="el-icon-location"></i>定时任务</el-menu-item>
          <el-menu-item index="/list3"><i class="el-icon-location"></i>数据监控</el-menu-item>
          <el-menu-item index="/list3"><i class="el-icon-location"></i>服务监控</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i><span>系统工具</span>
          </template>
          <el-menu-item index="/list1"><i class="el-icon-location"></i>表单构建</el-menu-item>
          <el-menu-item index="/list2"><i class="el-icon-location"></i>代码生成</el-menu-item>
          <el-menu-item index="/list3"><i class="el-icon-location"></i>系统接口</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header-container">
        <div class="header-breadcrumb" v-if="this.$route.meta && this.$route.meta.breadcrumb">
          <i class="el-icon-s-fold" style="font-size: 22px;margin-right: 10px; cursor: pointer;"
             @click="onCollapse"></i>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="this.$route.path !='/'">{{ this.$route.meta.name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header-breadcrumb" v-if="!this.$route.meta || !this.$route.meta.breadcrumb">
          <i class="el-icon-back" style="font-size: 15px;cursor: pointer;" @click="goBack">返回</i>
        </div>
      </el-header>
      <el-main class="chart-container">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>


export default {
  data() {
    return {
      width: '210px',
      isCollapse: false
    }
  },
  methods: {
    onCollapse() {
      if (this.isCollapse) {
        this.width = '200px';
      } else {
        this.width = '65px';
      }
      this.isCollapse = !this.isCollapse;
    },
    goBack() {
      this.$router.back();
    }
  },
  mounted() {
  }
}
</script>
<style scoped>

.el-header {
  height: 50px !important;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}

.el-aside {
  display: flex;
  flex-direction: column;
  border-right: solid 1px #e6e6e6;
  background-color: rgb(48, 65, 86);
  overflow-x: hidden;
}

/deep/ .el-menu {
  font-size: 14px;
  color: #FFFFFF;
  border-right: none;
}

/deep/ .el-menu-item {
  font-size: 14px;
  color: #FFFFFF;
  padding-left: 0px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #1f2d3d !important;
}

/deep/ .el-submenu__title {
  font-size: 14px;
  color: #FFFFFF;
  display: flex;
  justify-content: start;
  align-items: center;
  background-color: rgb(48, 65, 86);
}

.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.header-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.header-aside-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.header-log {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-title {
  font-size: 14px;
  color: #FFFFFF;
  font-weight: bolder;
}

.header-breadcrumb {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

</style>
